<template>
  <div>
    <nly-breadcrumb>
      <nly-breadcrumb-item
        icon="nlyfont nly-icon-home-fill"
        to="/"
        text="首页"
      />
      <nly-breadcrumb-item
        icon="nlyfont nly-icon-outlet"
        to="/typelist"
        active
        text="商品分类管理"
      />
    </nly-breadcrumb>
    <!-- 添加修改商品类型 -->
    <Modal
      :title="update ? '修改商品类型' : '添加商品类型'"
      :styles="{ width: '40%' }"
      v-model="modalAddText"
      class-name="vertical-center-modal"
      :footer-hide="true"
      @on-cancel="cancel"
    >
      <div>
        <Form ref="dataText" :model="dataText" :label-width="80">
          <FormItem label="商品分类" prop="type">
            <Input v-model="dataText.type" placeholder="请输入商品分类名称" />
          </FormItem>
           <FormItem label="类型图片" prop="type">
             <div class="formItemImage">
            <div style="width: 100%">
              <ImagePanel
                style="margin-left: 10px"
                @on-confirm="confirm_images"
                mode="multi"
              >
                <Button type="primary">类型图片</Button>
              </ImagePanel>
            </div>
            <div
              style="width: 150px; height: 150px; cursor: zoom-in"
              v-if="dataText.img"
            >
              <img
                :src="dataText.img"
                style="width: 150px; height: 150px; cursor: zoom-in"
                alt=""
              />
            </div>
          </div>
          </FormItem>
         
          <FormItem label="类型状态" prop="state">
            <Select
              v-model="dataText.state"
              @on-change="change_type"
              style="width: 200px"
              placeholder="请选择商品分类"
            >
              <Option value="0" >精选ip</Option>
              <Option value="1" >猜你喜欢</Option>
            </Select>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="AddText('dataText')">提交</Button>
            <Button @click="ModalClose" style="margin-left: 8px">取消</Button>
          </FormItem>
        </Form>
      </div>
    </Modal>
    <!-- Main content -->
    <section class="content" style="padding: 0px 10px 0px 10px">
      <row>
        <i-col :md="8" :sm="12">
          <i-button
            type="primary"
            style="margin-left: 16px; margin-bottom: 10px"
            @click="addShow"
            icon="md-add"
            >添加商品类型</i-button
          >
        </i-col>
      </row>
      <div>
        <br />
      </div>
      <Table
        border
        :columns="tableheader"
        :data="datalist"
        :loading="loading"
        @on-selection-change="enterall"
      >
     
        <template slot-scope="{ row }" slot="state">{{
          row.state == 0 ? "精选ip" : "猜你喜欢"
        }}</template>
         <template slot-scope="{ row }" slot="img">
          <img
            v-if="row.img"
            :src="row.img"
            width="60"
            height="60"
            style="padding: 3px"
            class="image"
          />
        </template>
        <template slot-scope="{ row }" slot="action">
          <Button
            style="margin-right: 10px"
            type="primary"
            size="small"
            icon="md-add"
            @click="changeText(row.id, row)"
            >修改</Button
          >
          <Button
            type="error"
            size="small"
            @click="remove(row.id)"
            icon="md-close"
            style="margin-left: 16px"
            >删除</Button
          >
        </template>
      </Table>
      <br />
      <div class="page">
        <Page
          :total="total"
          show-elevator
          show-total
          :page-size="data.pageSize"
          :current="data.page"
          @on-change="changePage"
        />
      </div>
    </section>
  </div>
</template>

<script>
import apis from "@/api/shop1";
import ImagePanel from "@/components/ImagePanel.vue";
export default {
  components: {ImagePanel},
  data() {
    return {
      loading: true,
      modalAddText: false,
      update: false,
      tableheader: [
        {
          title: "分类名称",
          key: "type",
          align: "center",
        },
        {
          title: "分类类型",
          key: "state",
           slot: "state",
          align: "center",
        },
        {
          title: "图片",
          slot: "img",
          align: "center",
        },
        {
          title: "操作",
          fixed: "right",
          slot: "action",
          width: 440,
          align: "center",
        },
      ],
      total: 0,
      id: "",
      pageNow: 1,
      datalist: [],
      data: {
        page: 1,
        pageSize: 10,
      },
      dataText: {
        type: "",
        state:0,
        img:''
      },
      searchText: "",
      enteralldata: [],
    };
  },
  created() {
    this.lookrecord();
  },
  methods: {
    change_type(val) {
        console.log(val);
        this.dataText.state = "";
        this.dataText.state = val;
      },
    confirm_images(val) {
        console.log(val)
        this.dataText.img = val[0]
      },
    addShow() {
      this.modalAddText = true;
    },
    ModalClose() {
      this.modalAddText = false;
      this.update = false;
    },
    changeText(id, data) {
      console.log("打开模态框");
      console.log(data)
      this.update = true;
      this.dataText.type = data.type;
       this.dataText.state = data.state+'';
        this.dataText.img = data.img;
      this.modalAddText = true;
      this.id = id;
      console.log(this.dataText)
    },
    lookrecord() {
      var _this = this;
      apis
        .gettypelist(this.data)
        .then((response) => {
          console.log(response);
          if (response.data.code == 0) {
            _this.datalist = response.data.data.list;
            _this.total = response.data.data.total;
            this.loading = false;
          } else {
            this.$Message.error("请求失败!");
          }
        })
        .catch((error) => {
          console.log(error);
          this.loading = false;
          this.$Message.error("请求失败!");
        });
    },
    changePage(val) {
      console.log(val);
      this.data.page = val;
      this.lookrecord();
      this.loading = false;
    },
    enterall(e) {
      this.enteralldata = e;
      console.log(e);
    },
    AddText(name) {
      console.log(name);
      console.log(this.update);
      var that = this;
      this.$refs[name].validate((valid) => {
        if (valid) {
          if (this.update) {
            this.dataText.id = this.id;
            apis
              .updatetypelist({
                id: this.dataText.id,
                type: this.dataText.type,
                state: this.dataText.state,
                img: this.dataText.img,
              })
              .then((response) => {
                if (response.data.code == 0) {
                  this.$Message.success("修改成功");
                  that.lookrecord();
                  this.modalAddText = false;
                  this.update = false;
                  this.$refs.dataText.resetFields();
                } else {
                  this.$Message.error("修改失败");
                }
              });
          } else {
            apis
              .addtypelist({
                type: this.dataText.type,
                state: this.dataText.state,
                img: this.dataText.img,
              })
              .then((response) => {
                this.loading = false;
                let resdata = response.data;
                if (resdata.code == 0) {
                  this.$refs.dataText.resetFields();
                  this.modalAddText = false;
                  this.update = false;
                  this.$Message.success("添加成功");
                  that.lookrecord();
                } else {
                  this.$Message.success("添加失败，请稍后重试");
                }
              });
          }
        }
      });
    },
    remove(id) {
     
      apis
        .deletetypelist({ id: id })
        .then((response) => {
          console.log(response);
          if (response.data.code == 0) {
            this.$Message.success("删除成功");
            this.lookrecord();
          } else {
            this.$Message.error("删除失败!");
          }
        })
        .catch((error) => {
          console.log(error);
          this.loading = false;
          this.$Message.error("删除失败!");
        });
    },
    cancel() {
      this.$refs.dataText.resetFields();
      this.dataText.pr_top_price = "";
      this.dataText.pr_give_price = "";
      this.modalAddText = false;
      this.update = false;
    },
  },
};
</script>

<style scoped>
.dataPicker {
  display: inline-block;
  width: 450px;
}
.image {
  max-width: 100%;
  max-height: 100px;
  margin: 10px;
}
.avatar {
  width: 50px;
  height: 50px;
  border-radius: 90px;
  margin: 5px;
}
.page {
  text-align: center;
}
</style>